<template>
  <div
    class="infoWindow"
    style="background: #fff; border-radius: 5px; position: relative"
  >
    <p class="titles">线路信息</p>
    <div class="content" style="text-align: left">
      <p class="item-r">路线名称：{{ value.roadNetworkName }}</p>
      <p class="item-r">车道数量：{{ value.laneNumStr }}</p>
      <p class="item-r">道路方向：{{ value.roadDirectionStr || "-" }}</p>
      <p class="item-r">行驶方向：{{ value.travelDirectionStr || "-" }}</p>
      <p class="item-r">备注信息：{{ value.memo || "-" }}</p>
      <p class="item-r">入卡口设备：{{ value.kakouInName || "-" }}</p>
      <p class="item-r">出卡口设备：{{ value.kakouOutName || "-" }}</p>
      <p class="item-r">雷视拥堵设备：{{ value.deviceName || "-" }}</p>
    </div>
    <Button
      class="lookmoin"
      type="text"
      size="small"
      style="color: #2c66ab"
      @click="lookMointer()"
    >
      查看监控
    </Button>
    <Modal
      :footer-hide="true"
      title="查看监控"
      width="800px"
      :mask-closable="false"
      v-model="visibleShow"
      class-name="noBorder"
      @on-visible-change="visibleChange"
    >
      <component
        :is="activeName"
        :markerGeometries="markerGeometries"
        :key="timer"
        ref="coms"
      >
      </component>
    </Modal>

    <Icon
      v-if="isClose"
      class="dclose"
      type="ios-close"
      size="16"
      @click="closeClick"
    />
  </div>
</template>

<script>
import componentName from "./component/index";
import { lookLine } from "@/api/gis";
export default {
  name: "infoWindow",
  props: {
    value: {
      type: Object,
      default: () => {},
    },
    tabs: {
      type: Array,
      default: () => [],
    },
    isClose: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      componentName,
      activeNames: "",
      visibleShow: false,
      timer: "",
      obj: {},
      markerGeometries: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        if (Object.keys(val)?.length) {
          this.lookLine();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    activeName() {
      if (this.activeNames) {
        let c = () => import(`${this.componentName[this.activeNames]}`);
        return c;
      }
    },
  },
  mounted() {},

  methods: {
    // 查看详情
    lookLine() {
      lookLine(this.value.id).then((res) => {
        this.obj = res.data;
      });
    },
    // 过滤设备类型
    formatterType() {
      return (
        this.tabs.find((it) => it.value == this?.value.deviceType)?.name || "-"
      );
    },
    // 关闭弹窗
    closeInfoWindow() {
      this.$parent.closeInfoWindow();
    },
    // 关闭弹窗(3dMap中)
    closeClick() {
      this.closeEvent();
    },
    // 关闭弹窗前
    visibleChange(val) {
      if (!val) {
        this.$refs.coms.$refs.vsi.clearControl();
        this.markerGeometries = [];
      }
    },
    // 查看监控
    lookMointer() {
      var deviceCodes = this.obj.deviceInfoList.map((it) => it.deviceIndexCode);
      var inDeviceCode = this.obj.inDeviceInfoList.map(
        (it) => it.deviceIndexCode
      );
      this.markerGeometries = [
        ...new Set([...deviceCodes, ...inDeviceCode]),
      ].map((it) => {
        return {
          indexCode: it,
        };
      });
      if (this.markerGeometries) {
        this.timer = new Date().getTime();
        this.activeNames = "lookMointer";
        this.visibleShow = true;
      } else {
        this.$Message.error("设备编码为空，无法查看");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.infoWindow {
  padding: 10px;
  .titles {
    font-size: 15px;
  }
  .item-r {
    margin: 6px 0 !important;
  }
  .ivu-icon-ios-close {
    cursor: pointer;
    text-align: right;
    position: absolute;
    right: 10px;
    top: 10px;
    &:focus {
      background-color: rgba(128, 128, 128, 0.281);
    }
    &:hover {
      background-color: rgba(128, 128, 128, 0.281);
    }
  }

  // 3d关闭弹窗
  .dclose {
  }
}
</style>
